<template>
  <div class="layout-page">
    <!-- 二级路由出口 -->
    <router-view></router-view>

    <van-tabbar route active-color="#8bc34a" placeholder>
      <!-- 1.开启路由模式 route: 开启路由模式  route:写在行内相当于就是true    to="/path" : 点击对应的tab栏需要跳转的路由-->
      <!-- 2.设置自定义高亮颜色 active-color="#8bc34a" -->
      <!-- 3.绑定tab栏点击事件  v-model="active" -->
      <!-- 4.设置底部占位  placeholder ： 默认固定在最底部会遮挡标准流，可以在同样位置生成一个空的标准流div把脱标的位置给占住 顶部导航栏一样需要添加 -->

      <!-- icon在网页的基础组件的Icon图标里的线框风格 复制图标下的类名 -->
      <van-tabbar-item to="/article" icon="notes-o">面经</van-tabbar-item>
      <van-tabbar-item to="/collect" icon="star-o">收藏</van-tabbar-item>
      <van-tabbar-item to="/like" icon="like-o">喜欢</van-tabbar-item>
      <van-tabbar-item to="/user" icon="user-o">我的</van-tabbar-item>
</van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'layout-page',
  data () {
    return {
      active: 0
    }
  }
}
</script>

<style lang="less" scoped></style>
